<template>
	<view>
		<Banner />
		
		<view class="ad-area">
			<view class="ad-item" @click="toPage(1)">
				<image class="ad-bg" src='/static/pwhd-bg.png'></image>
				<text class="ad-tip blue">国庆早定省</text>
				<image class="ad-img" src="/static/banner.png"></image>
			</view>
			<view class="ad-item" @click="toPage(2)">
				<image class="ad-bg" src='/static/jqyyhd-bg.png'></image>
				
				<text class="ad-tip red">迪士尼学生票</text>
				<image class="ad-img" src="/static/banner.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import Banner from '@/components/banner.vue'
	export default{
		data(){
			return{
				navConfig: {
					left:{
						leftExist:true,
						ifleftGoback:false,
						leftGoback:'arrowleft',
						leftIconName:'沈阳',
						leftIcon:'/static/pos-home.png'
					},
					mid:{
						ifSearch:true,
						placeText:'请输入搜索内容'
						},
					right:{
						rightExist:true,
						rightIcon1:'/static/weater.png',
						rightIcon2:'',
						rightIconName1:'多云',
						rightIconName2:'',
						ifrightIcon2:false
					}
				},
				
			}
		},
		components:{
			Banner,
		},
		methods:{
			toPage(pageIndex){
				switch(pageIndex){
					case 1:
						uni.navigateTo({
							url:'piaowuhuodong'
						})
						break;
					case 2:
						uni.navigateTo({
							url:'yanyihuodong'
						})
						break;	
				}
				
			}
		}
	}
</script>

<style scoped>
	/* 广告 */
	.ad-area{
		width: 721upx;
		height: auto;
	/* 	padding-left: 30upx;
		padding-right: 30upx; */
		
	}
	.ad-item{
		width: 721upx;
		height: 339upx;
		border-radius: 10upx;
		position: relative;
		margin-top: 40upx;
		
	}
	.ad-bg{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.ad-item:nth-child(1){
		background: url(../../static/pwhd-bg.png) no-repeat;
		background-size: 721upx 339upx;
	}
	.ad-item:nth-child(2){
		background: url(../../static/jqyyhd-bg.png) no-repeat;
		background-size: 721upx 339upx;
	}
	.ad-img{
		width: 279upx;
		height: 318upx;
		float: right;
		border-radius: 0 10upx 10upx 0;
		 -webkit-clip-path:polygon(25% 0px,100% 0px ,100% 100%,0px 100%);
	}
	.ad-name{
		font-size: 28upx;
		color: #FFFFFF;
		left: 19upx;
		top: 35upx;
		position: absolute;
	}
	.ad-tip{
		height: 47upx;
		background: #FFFFFF;
		border-radius: 10upx;
		left: 73upx;
		top:208upx;
		padding: 0 33upx;
		font-size: 30upx;
		position: absolute;
		line-height: 47upx;
		text-align: center;
		
	}
	.blue{
		color: #758BF8;
	}
	.red{
		color: #FC7476;
	}
</style>
